<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>

<head>
    <title>新建订单</title>

    <%--<link href="../../../statics/bootstrap/css/bootstrap.min.css" rel="stylesheet" />--%>
    <%--<link href="../../../statics/styles/navbar.css" rel="stylesheet" />--%>

    <link href="${ctx}/statics/bootstrap/plugin/datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>


    <style>
        .side-menu {
            margin-top: 50px;
        }
    </style>

</head>

<body>

<div class="row">
    <div class="col-sm-11">
        <ul class="breadcrumb">
            <li><a href="${ctx}/workbench/1/waybills" > 我的订单</a></li>
            <li class="active">新建订单</li>
        </ul>
    </div>
</div>
<div div="row">
    <div class="col-sm-11">
        <div class="row">
            <div class="panel panel-default">
                <div class="panel-heading">新建订单</div>
                <div class="panel-body">
                    <sf:form role="form" class="form-horizontal" action="new" commandName="waybill"
                             id="idNewWaybillForm"
                             method="post">
                        <div class="row">

                            <div class="form-group">
                                <label class="col-sm-2 control-label">物流公司:</label>

                                <div class="col-sm-3">
                                    <input class="form-control" name="companyId" value="${waybill.companyId}"
                                           type="hidden">
                                    <input class="form-control" name="companyName" type="text"
                                           value="${waybill.companyName}" readonly>

                                    <div class="help-block with-errors">
                                        <sf:errors path="companyName" cssClass="alert alert-danger"
                                                   element="div"></sf:errors>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">公司地址::</label>

                                <div class="col-sm-8">
                                    <input class="form-control" name="companyAddr" type="text"
                                           value="${waybill.companyAddr}">

                                    <div class="help-block with-errors">
                                        <sf:errors path="companyAddr" cssClass="alert alert-danger"
                                                   element="div"></sf:errors>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">

                                <label class="col-sm-2 control-label"> 联系电话:</label>

                                <div class="col-sm-3">
                                    <input class="form-control" name="companyPhoneNo1" type="text"
                                           value="${waybill.companyPhoneNo1}">

                                    <div class="help-block with-errors">
                                        <sf:errors path="companyPhoneNo1" cssClass="alert alert-danger"
                                                   element="div"></sf:errors>
                                    </div>
                                </div>
                                <label class="col-sm-2 control-label">手机号码:</label>

                                <div class="col-sm-3">
                                    <input class="form-control" name="companyPhoneNo2" type="text"
                                           value="${waybill.companyPhoneNo2}">

                                    <div class="help-block with-errors">
                                        <sf:errors path="companyPhoneNo2" cssClass="alert alert-danger"
                                                   element="div"></sf:errors>
                                    </div>
                                </div>
                            </div>

                            <hr style="border:0; border-top:1px dashed #ccc;margin-left: 10px;margin-right: 10px">

                            <div class="form-group">
                                <label class="col-sm-2 control-label">
                                    是否上门提货:
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="waybillType" id="radioWaybillType1" value="1"
                                           <c:if test='${waybill.waybillType!=2}'>checked</c:if> /> 自寄
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="waybillType" id="radioWaybillType2" value="2"
                                           <c:if test='${waybill.waybillType==2}'>checked</c:if> /> 上门提货
                                </label>
                            </div>


                            <div class="form-group">
                                <label class="col-sm-2 control-label"><span
                                        class="text-warning">*</span>运单号:</label>

                                <div class="col-sm-3">
                                    <input type="text" class="form-control" placeholder="" name="waybillNo"
                                           value="${waybill.waybillNo}">

                                    <div class="help-block with-errors">
                                        <sf:errors path="waybillNo" cssClass="alert alert-danger"
                                                   element="div"></sf:errors>
                                    </div>
                                </div>
                                <label class="col-sm-2 control-label">托运日期:</label>

                                <div class="col-sm-3">
                                    <input class="form-control" id="inputSendDate" name="sendDate" type="text"
                                           value="<fmt:formatDate value='${waybill.sendDate}' pattern='yyyy-MM-dd HH:mm'/>"
                                           readonly>

                                    <div class="help-block with-errors">
                                        <sf:errors path="sendDate" cssClass="alert alert-danger"
                                                   element="div"></sf:errors>
                                    </div>
                                </div>

                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">始发站:</label>

                                <div class="col-sm-3">
                                    <input class="form-control" name="startAddr" type="text"
                                           value="${waybill.startAddr}">

                                    <div class="help-block with-errors">
                                        <sf:errors path="startAddr" cssClass="alert alert-danger"
                                                   element="div"></sf:errors>
                                    </div>
                                </div>

                                <label class="col-sm-2 control-label">到达站:</label>

                                <div class="col-sm-3">
                                    <input class="form-control" name="endAddr" type="text"
                                           value="${waybill.endAddr}">

                                    <div class="help-block with-errors">
                                        <sf:errors path="endAddr" cssClass="alert alert-danger"
                                                   element="div"></sf:errors>
                                    </div>
                                </div>
                            </div>
                            <hr style="border:0; border-top:1px dashed #ccc;margin-left: 10px;margin-right: 10px">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">收件人姓名:</label>

                                <div class="col-sm-3">
                                    <input class="form-control" name="receiverId" type="hidden"
                                           value="${waybill.receiverId}">
                                    <input class="form-control" name="receiverName" type="text"
                                           value="${waybill.receiverName}">

                                    <div class="help-block with-errors">
                                        <sf:errors path="receiverName" cssClass="alert alert-danger"
                                                   element="div"></sf:errors>
                                    </div>
                                </div>

                                <label class="col-sm-2 control-label">联系电话</label>

                                <div class="col-sm-3">
                                    <input class="form-control" name="receiverPhoneNo" type="text"
                                           value="${waybill.receiverPhoneNo}">

                                    <div class="help-block with-errors">
                                        <sf:errors path="receiverPhoneNo" cssClass="alert alert-danger"
                                                   element="div"></sf:errors>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">地址</label>

                                <div class="col-sm-8">
                                    <input class="form-control" name="receiverAddr" type="text"
                                           value="${waybill.receiverAddr}">

                                    <div class="help-block with-errors">
                                        <sf:errors path="receiverAddr" cssClass="alert alert-danger"
                                                   element="div"></sf:errors>
                                    </div>
                                </div>
                            </div>
                            <hr style="border:0; border-top:1px dashed #ccc;margin-left: 10px;margin-right: 10px">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">发货人姓名:</label>

                                <div class="col-sm-3">
                                    <input class="form-control" name="senderName" type="text"
                                           value="${waybill.senderName}">

                                    <div class="help-block with-errors">
                                        <sf:errors path="senderName" cssClass="alert alert-danger"
                                                   element="div"></sf:errors>
                                    </div>
                                </div>

                                <label class="col-sm-2 control-label">联系电话:</label>

                                <div class="col-sm-3">
                                    <input class="form-control" name="senderPhoneNo" type="tel"
                                           value="${waybill.senderPhoneNo}">

                                    <div class="help-block with-errors">
                                        <sf:errors path="senderPhoneNo" cssClass="alert alert-danger"
                                                   element="div"></sf:errors>
                                    </div>
                                </div>
                            </div>
                            <hr style="border:0; border-top:1px dashed #ccc;margin-left: 10px;margin-right: 10px">

                            <div class="form-group">
                                <label class="col-sm-2 control-label">
                                    付款方式:
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="payType" id="radioPayType1" value="1"
                                           <c:if test="${waybill.payType==1 ||waybill.payType == null}">checked</c:if> />
                                    现付
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="payType" id="radioPayType2" value="2"
                                           <c:if test="${waybill.payType==2}">checked</c:if> /> 提付
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="payType" id="radioPayType3" value="3"
                                           <c:if test="${waybill.payType==3}">checked</c:if> /> 回单付
                                </label>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">备注信息</label>

                                <div class="col-sm-8">
                                    <input class="form-control" name="remark" type="text"
                                           value="${waybill.remark}">

                                    <div class="help-block with-errors">
                                        <sf:errors path="remark" cssClass="alert alert-danger"
                                                   element="div"></sf:errors>
                                    </div>
                                </div>
                            </div>

                            <hr style="border:0; border-top:1px dashed #ccc;margin-left: 10px;margin-right: 10px;margin-bottom: 0px;">
                            <c:if test="${waybill.goods ==null || waybill.goods.size()<=0}">
                                <div class="my-goods-input-group">
                                    <div class="form-group">
                                        <button class="btn btn-link pull-right btn-del-goods" type="button"
                                                style="margin-right: 20px;">-删除货物
                                        </button>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label"><span
                                                class="text-warning">*</span>货名:</label>

                                        <div class="col-sm-3">
                                            <input type="text" class="form-control  my-goods-input-name"
                                                   name="goods[0].goodsName"
                                                   value="">

                                            <div class="help-block with-errors"></div>
                                        </div>
                                        <label class="col-sm-2 control-label">包装:</label>

                                        <div class="col-sm-3">
                                            <input class="form-control  my-goods-input-pkg-desc"
                                                   name="goods[0].packageDesc" type="text"
                                                   value="">

                                            <div class="help-block with-errors"></div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">数量:</label>

                                        <div class="col-sm-3">
                                            <div class="input-group  input-my-unit-of-qty">
                                                <input type="text" class="form-control" name="goods[0].qty"
                                                       value="">
                                                <input type="hidden" class="my-goods-input-unit-code"
                                                       name="goods[0].unitCode"
                                                       value="${unitsOfQty[0].value}"/>

                                                <div class="input-group-btn">
                                                    <button type="button" class="btn btn-default dropdown-toggle"
                                                            data-toggle="dropdown">
                                                        <span class="my-unit-name">${unitsOfQty[0].text}</span>
                                                        <span class="caret"></span></button>
                                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                                        <c:forEach var="unit" items="${unitsOfQty}">
                                                            <li><a href="javascript:void(0)"
                                                                   data-my-value="${unit.value}">${unit.text}</a>
                                                            </li>
                                                        </c:forEach>

                                                    </ul>
                                                </div>
                                                <!-- /btn-group -->
                                            </div>
                                            <!-- /input-group -->
                                            <div class="help-block with-errors">
                                            </div>
                                        </div>
                                        <label class="col-sm-2 control-label">运费:</label>

                                        <div class="col-sm-3">
                                            <div class="input-group">
                                                <input class="form-control my-goods-input-fee" name="goods[0].fee"
                                                       type="number"
                                                       value="">
                                                <span class="input-group-addon">元</span>
                                            </div>
                                            <div class="help-block with-errors">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </c:if>
                            <c:if test="${waybill.goods.size()>0}">
                                <c:forEach items="${waybill.goods}" var="goods" varStatus="forEachStatus">
                                    <div class="my-goods-input-group">
                                        <div class="form-group">
                                            <button class="btn btn-link pull-right btn-del-goods" type="button"
                                                    style="margin-right: 20px;">-删除货物
                                            </button>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label"><span class="text-warning">*</span>货名:</label>

                                            <div class="col-sm-3">
                                                <input type="text" class="form-control my-goods-input-name"
                                                       name="goods[${forEachStatus.index}].goodsName"
                                                       value="${goods.goodsName}">

                                                <div class="help-block with-errors">
                                                    <sf:errors path="goods[${forEachStatus.index}].goodsName"
                                                               cssClass="alert alert-danger"
                                                               element="div"></sf:errors>
                                                </div>
                                            </div>

                                            <label class="col-sm-2 control-label">包装:</label>

                                            <div class="col-sm-3">
                                                <input class="form-control my-goods-input-pkg-desc"
                                                       name="goods[${forEachStatus.index}].packageDesc" type="text"
                                                       value="${goods.packageDesc}">

                                                <div class="help-block with-errors">
                                                    <sf:errors path="goods[${forEachStatus.index}].packageDesc"
                                                               cssClass="alert alert-danger"
                                                               element="div"></sf:errors>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">数量:</label>

                                            <div class="col-sm-3">
                                                <div class="input-group  input-my-unit-of-qty">
                                                    <input type="text" class="form-control  my-goods-input-qty"
                                                           name="goods[${forEachStatus.index}].qty"
                                                           value="${goods.qty}">
                                                    <input type="hidden" class="my-goods-input-unit-code"
                                                           name="goods[${forEachStatus.index}].unitCode"
                                                           value="${goods.unitCode}"/>

                                                    <div class="input-group-btn">
                                                        <button type="button" class="btn btn-default dropdown-toggle"
                                                                data-toggle="dropdown">
                                                            <span class="my-unit-name"> ${goods.unitName}</span>
                                                            <span class="caret"></span></button>
                                                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                                            <c:forEach var="unit" items="${unitsOfQty}">
                                                                <li><a href="javascript:void(0)"
                                                                       data-my-value="${unit.value}">${unit.text}</a>
                                                                </li>
                                                            </c:forEach>

                                                        </ul>
                                                    </div>
                                                    <!-- /btn-group -->
                                                </div>
                                                <!-- /input-group -->
                                                <div class="help-block with-errors">
                                                    <sf:errors path="goods[${forEachStatus.index}].unitCode"
                                                               cssClass="alert alert-danger"
                                                               element="div"></sf:errors>
                                                </div>
                                            </div>
                                            <label class="col-sm-2 control-label">运费:</label>

                                            <div class="col-sm-3">
                                                <div class="input-group">
                                                    <input class="form-control my-goods-input-fee"
                                                           name="goods[${forEachStatus.index}].fee" type="number"
                                                           value="${goods.fee}">
                                                    <span class="input-group-addon">元</span>
                                                </div>
                                                <div class="help-block with-errors">
                                                    <sf:errors path="goods[${forEachStatus.index}]fee"
                                                               cssClass="alert alert-danger"
                                                               element="div"></sf:errors>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </c:forEach>
                            </c:if>


                            <hr style="border:0; border-top:1px dashed #ccc;margin-left: 10px;margin-right: 10px;margin-bottom: 0px;">
                            <div class="form-group">
                                <button class="btn btn-link pull-right btn-add-goods" type="button"
                                        style="margin-right: 20px;">+添加货物
                                </button>
                            </div>


                                <%--<div class="form-group">--%>
                                <%--<label class="col-sm-2 control-label">发货地</label>--%>
                                <%--<div class="col-sm-3">--%>
                                <%--<div class="input-group">--%>
                                <%--<input id="inputStartLocation" type="text" class="form-control "  name="startLocationName" value="${waybill.startLocationName}"--%>
                                <%--placeholder="如:广州" readonly/>--%>
                                <%--<input id="inputStartLocationHidden" name="startLocationId" type="hidden"   value="${waybill.startLocationId}" />--%>
                                <%--<div class="input-group-btn">--%>
                                <%--<button id="btnStartLocation" class="btn btn-default" type="button"><span--%>
                                <%--class="glyphicon glyphicon-globe"></span></button>--%>
                                <%--</div>--%>
                                <%--</div>--%>
                                <%--<div class="help-block with-errors">--%>
                                <%--<sf:errors path="startLocationId" cssClass="alert alert-danger" element="div"></sf:errors>--%>
                                <%--</div>--%>
                                <%--</div>--%>
                                <%--</div>--%>


                                <%--<div style="margin-left: 10px"><h4>收货人信息</h4></div>--%>

                                <%--<div class="form-group">--%>
                                <%--<label class="col-sm-2 control-label">目的地</label>--%>
                                <%--<div class="col-sm-3">--%>
                                <%--<div class="input-group">--%>
                                <%--<input id="inputEndLocation" type="text" class="form-control "  name="endLocationName" value="${waybill.endLocationName}"--%>
                                <%--placeholder="如:广州" readonly/>--%>
                                <%--<input id="inputEndLocationHidden" name="endLocationId" type="hidden"   value="${waybill.endLocationId}" />--%>
                                <%--<div class="input-group-btn">--%>
                                <%--<button id="btnEndLocation" class="btn btn-default" type="button"><span--%>
                                <%--class="glyphicon glyphicon-globe"></span></button>--%>
                                <%--</div>--%>
                                <%--</div>--%>
                                <%--<div class="help-block with-errors">--%>
                                <%--<sf:errors path="endLocationId" cssClass="alert alert-danger" element="div"></sf:errors>--%>
                                <%--</div>--%>
                                <%--</div>--%>
                                <%--</div>--%>


                            <!-- /input-group -->
                            <button type="submit" class="btn btn-success col-sm-offset-2">新建</button>
                            <button type="button" class="btn btn-warning" id="btnCancel">取消</button>
                        </div>
                    </sf:form>
                </div>

            </div>

        </div>


    </div>

</div>


<!-- Large modal -->

<div id="myRegionSelectorModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">地区选择</h4>
            </div>
            <div class="modal-body">
                <div class="container" id="divRegionSelector"></div>
            </div>

        </div>
    </div>
</div>


<%--<script src="../../../statics/js/jquery-3.1.1.min.js"></script>--%>
<%--<script src="../../../statics/bootstrap/js/bootstrap.min.js"></script>--%>
<script src="${ctx}/statics/echarts/echarts.min.js"></script>
<script src="${ctx}/statics/js/regionselector.js"></script>

<script src="${ctx}/statics/bootstrap/plugin/datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="${ctx}/statics/bootstrap/plugin/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

<script>

    $(function () {

        $("#waybills-tab").addClass("active");

        $("#btnCancel").click(function () {
            window.location = "${ctx}/workbench/1/waybills";
        });

        //日期选择器
        $("#inputSendDate").datetimepicker({
            format: 'yyyy-mm-dd hh:ii',
            language: 'zh-CN',
            autoclose:true

        });


        //添加货物
        $('.btn-add-goods').click(function (e) {
            $('.my-goods-input-group:last').clone().insertAfter($('.my-goods-input-group:last'));
            console.log($(".my-goods-input-group").length);
            //删除货物
            $('.btn-del-goods').click(function (e) {
                //如果货物个数等于1个，则不能删除
                if ($(".my-goods-input-group").length <= 1) {
                    return;
                }
                $(this).parents(".my-goods-input-group:first").remove();
            });
            deleteGoodsListener();
            initUintSelector();
        });

        var deleteGoodsListener = function () {
            //删除货物
            $('.btn-del-goods').click(function (e) {
                //如果货物个数等于1个，则不能删除
                if ($(".my-goods-input-group").length <= 1) {
                    return;
                }
                $(this).parents(".my-goods-input-group:first").remove();
            });
        }
        deleteGoodsListener();

        //单位选择
        var initUintSelector = function () {
            //单位选择

            $('.input-my-unit-of-qty a').click(function (e) {
                var v1 = $(this).data("my-value");
                var t1 = $(this).html();
                $(this).parents(".input-my-unit-of-qty").find("button .my-unit-name").html(t1);
                console.log($(this).parents(".input-my-unit-of-qty"));
                $(this).parents(".input-my-unit-of-qty").find("input[type='hidden']").val(v1);
            });
        };
        initUintSelector();

        $("#idNewWaybillForm").submit(function (e) {
            //先改名字
            $(".my-goods-input-group").each(function (index, item) {
                $(item).find(".my-goods-input-name").attr("name", "goods[" + index + "].goodsName");
                $(item).find(".my-goods-input-pkg-desc").attr("name", "goods[" + index + "].packageDesc");
                $(item).find(".my-goods-input-qty").attr("name", "goods[" + index + "].qty");
                $(item).find(".my-goods-input-unit-code").attr("name", "goods[" + index + "].unitCode");
                $(item).find(".my-goods-input-fee").attr("name", "goods[" + index + "].fee");

            });

        });
//        //地图选择器
//        var myRegionSelector = regionselector.init('divRegionSelector');
//        myRegionSelector.click(function (param) {
//            alert(param.value);
//
//        });

//        //发货地选择
//        $('#btnStartLocation').click(function () {
//            myRegionSelector.reset();
//            $('#myRegionSelectorModal').modal();
//            myRegionSelector.click(function (param) {
//                $('#inputStartLocation').val(param.text);
//                $('#inputStartLocationHidden').val(param.value);
//                $('#myRegionSelectorModal').modal('hide');
//
//            });
//        });

//        //收货地选择
//        $('#btnEndLocation').click(function () {
//            myRegionSelector.reset();
//            $('#myRegionSelectorModal').modal();
//            myRegionSelector.click(function (param) {
//                $('#inputEndLocation').val(param.text);
//                $('#inputEndLocationHidden').val(param.value);
//                $('#myRegionSelectorModal').modal('hide');
//
//            });
//        });

//        //物流公司所在地选择
//        $('#btnCompanyLocation').click(function () {
//            myRegionSelector.reset();
//            $('#myRegionSelectorModal').modal();
//            myRegionSelector.click(function (param) {
//                $('#inputCompanyLocation').val(param.text);
//                $('#inputCompanyLocationHidden').val(param.value);
//                $('#myRegionSelectorModal').modal('hide');
//
//            });
//        });


    })
</script>

</body>

</html>